import React, { useState } from 'react';
import { Card, Button, Upload, message, Input, Row, Col } from 'antd';
import type { UploadProps } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = Upload;
const { TextArea } = Input;

const IntelligentDeletion: React.FC = () => {
  const [imageUrl, setImageUrl] = useState<string>('');
  const [processedImageUrl, setProcessedImageUrl] = useState<string>('');
  const [deletionDescription, setDeletionDescription] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);

  const uploadProps: UploadProps = {
    name: 'file',
    multiple: false,
    action: '/api/upload',
    onChange(info) {
      const { status } = info.file;
      if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
        setImageUrl(URL.createObjectURL(info.file.originFileObj as File));
        setProcessedImageUrl(''); // 重置处理结果
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  const handleIntelligentDeletion = () => {
    if (!imageUrl || !deletionDescription) {
      message.warning('请先上传图片并描述需要清除的内容');
      return;
    }

    setLoading(true);
    // 模拟AI智能清除过程
    setTimeout(() => {
      message.success('智能清除完成');
      // 在实际应用中，这里会使用AI处理后的图片URL
      setProcessedImageUrl(imageUrl);
      setLoading(false);
    }, 3000);
  };

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">智能清除</h2>
      <Card title="上传图片" className="mb-4">
        <Dragger {...uploadProps}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
          <p className="ant-upload-hint">
            支持单个图片文件上传，系统将智能识别并清除指定内容
          </p>
        </Dragger>
      </Card>
      
      {imageUrl && (
        <Row gutter={[16, 16]} className="mb-4">
          <Col span={24} md={12}>
            <Card title="图片预览" loading={loading}>
              <div className="flex justify-center">
                <img 
                  src={imageUrl} 
                  alt="原图" 
                  className="max-w-full max-h-[400px]" style={{ 
                maxWidth: '100vw', 
                maxHeight: '60vh',
                margin: '0 auto'
              }}
                />
              </div>
            </Card>
          </Col>
          <Col span={24} md={12}>
            <Card title="智能清除设置">
              <TextArea
                rows={4}
                placeholder="请描述您想要清除的物体或人物，例如：'画面右侧的垃圾桶'、'背景中的行人'等"
                value={deletionDescription}
                onChange={(e) => setDeletionDescription(e.target.value)}
                className="mb-4"
              />
              <div className="text-sm text-gray-500 mb-4">
                <p>• 请尽可能详细地描述需要清除的内容</p>
                <p>• 系统会自动填充清除区域的背景</p>
                <p>• 适用于移除照片中不需要的物体、人物或瑕疵</p>
              </div>
              <Button type="primary" onClick={handleIntelligentDeletion} loading={loading} block>
                开始智能清除
              </Button>
            </Card>
          </Col>
        </Row>
      )}
      
      {processedImageUrl && !loading && (
        <Card title="智能清除结果">
          <div className="flex justify-center">
            <img 
              src={processedImageUrl} 
              alt="智能清除结果" 
              className="max-w-full max-h-[500px]" style={{ 
                maxWidth: '100vw', 
                maxHeight: '60vh',
                margin: '0 auto'
              }}
            />
          </div>
          <div className="flex justify-center mt-4 space-x-4">
            <Button>下载原图</Button>
            <Button type="primary">下载处理后图片</Button>
            <Button>调整清除区域</Button>
          </div>
        </Card>
      )}
    </div>
  );
};

export default IntelligentDeletion;